<template>
  <div class="bapinModule publicHCenter">
    <div class="bapinBox" :class="{ show: isShowAni }">
      <img src="https://static.hudongmiao.com/joymewH5/img/popupArea/loveBubble.png" class="loveBubbleImg1" />
      <img src="https://static.hudongmiao.com/joymewH5/img/popupArea/loveBubble.png" class="loveBubbleImg2" />
      <div class="title">祝福霸屏</div>
      <div class="colorWrap">
        <div class="item" v-for="item in bapinTypeList" :key="item.giftId">
          <div class="price publicHvCenter">
            {{ item.giftname }} {{ item.price }} <img src="@/assets/image/icon/diamond.png" class="unit" />
          </div>
          <div
            class="color publicHvCenter"
            :class="[item.colorCode, { active: currentBapinType === item.giftId }]"
            v-tap="{ methods: chooseBapinType, giftId: item.giftId }"
          >
            {{ item.color }}
          </div>
        </div>
      </div>
      <div class="txtWrap publicHCenter">
        <textarea
          v-model="content"
          maxlength="40"
          ref="text"
          cols="30"
          rows="10"
          placeholder="请输入祝福内容(40字以内)"
          v-on:blur="blur"
        ></textarea>
      </div>
      <div class="btnWrap publicHCenter">
        <div class="btn publicHvCenter" v-tap="{ methods: send }">霸气发送</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { sendBapinGift } from '@/api/index/index';
import { sendBapinGiftMessage } from '@/api/chat/index';
import { POPUP_MODULE } from '@/assets/constant/index';
import { timeoutTask } from '../../utils/index';

export default {
  name: 'bapinPopup',
  computed: {
    ...mapState({
      bapinTypeList: (state) => state.live.bapinTypeList,
      currentBapinType: (state) => state.app.currentBapinType,
      money: (state) => state.user.money,
      freeSendGift: (state) => state.user.freeSendGift,
    }),
  },
  created() {},
  mounted() {
    // 执行弹出动画
    this.showAniStart();
    console.log(this.bapinTypeList);
  },
  data() {
    return {
      isShowAni: false, // 控制bapin box弹出动画
      content: '',
    };
  },
  methods: {
    ...mapMutations({
      setCurrentBapinType: 'app/setCurrentBapinType',
      setUserInfo: 'user/setUserInfo',
      togglePopup: 'app/togglePopup',
      setOrigin: 'app/setOrigin',
    }),
    blur() {
      window.scrollTo(0, -document.documentElement.clientHeight);
    },
    showAniStart() {
      timeoutTask(() => {
        this.isShowAni = true;
      }, 100);
    },
    hideAniStart() {
      this.isShowAni = false;
    },
    chooseBapinType(d) {
      this.setCurrentBapinType(d.giftId);
    },
    validateSend() {
      let flag = true;
      const choosedBapinType = this.bapinTypeList.find((item) => item.giftId === this.currentBapinType);
      if (!this.currentBapinType) {
        flag = false;
        this.$toast.center('请选择霸屏类型!');
      } else if (!this.content) {
        flag = false;
        this.$toast.center('请输入霸屏内容!');
      } else if (this.freeSendGift) {
        flag = true;
      } else if (choosedBapinType.price > this.money) {
        this.$toast.center('余额不足,请充值!');
        flag = false;
        this.setOrigin('sendBapin');
        this.togglePopup();
        timeoutTask(() => {
          this.togglePopup(POPUP_MODULE.rechargeModule.key);
        }, 200);
      }
      return flag;
    },
    send() {
      if (!this.validateSend()) {
        return;
      }
      this.$loading('发送中...');
      sendBapinGift(this.content)
        .then((res1) => {
          console.log(res1);
          this.$loading.close();
          // 更新 用户余额
          this.setUserInfo({
            money: res1.result.balance,
          });
          return this.sendBroadcast(this.content); // 发送礼物的广播
        })
        .then(() => {
          this.content = '';
          this.$toast.center('发送成功!');
          this.togglePopup();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    sendBroadcast(content) {
      sendBapinGiftMessage(content);
    },
  },
};
</script>
<style lang="less" scoped>
.bapinModule {
  position: absolute;
  width: 100%;
  height: 708px;
  bottom: 0;
  .bapinBox {
    width: 750px;
    height: 708px;
    background-image: url(https://static.hudongmiao.com/joymewH5/img/popupArea/box.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: all 0.2s linear;
    position: absolute;
    top: 708px;
    &.show {
      transform: translateY(-708px);
    }
    .loveBubbleImg1 {
      width: 108px;
      height: 117px;
      position: absolute;
      top: -46px;
      left: 182px;
    }
    .loveBubbleImg2 {
      width: 108px;
      height: 117px;
      position: absolute;
      top: -10px;
      left: 474px;
    }
    .title {
      font-size: 40px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 8px;
      color: #ffffff;
      text-align: center;
      margin: 32px auto;
      text-shadow: #9316c2 1px 1px 0, #9316c2 -1px -1px 0, #9316c2 1px -1px 0, #9316c2 -1px 1px 0, #9316c2 2px 2px 0, #9316c2 -2px -2px 0,
        #9316c2 2px -2px 0, #9316c2 -2px 2px 0, #9316c2 3px 3px 0, #9316c2 -3px -3px 0, #9316c2 3px -3px 0, #9316c2 -3px 3px 0,
        #9316c2 4px 4px 0, #9316c2 -4px -4px 0, #9316c2 -4px 4px 0, #9316c2 4px -4px 0, #9316c2 5px 5px 0, #9316c2 -5px -5px 0,
        #9316c2 -5px 5px 0, #9316c2 5px -5px 0;
    }
    .colorWrap {
      width: 100%;
      height: 153px;
      margin-top: 17px;
      display: flex;
      justify-content: space-around;
      .item {
        width: 215px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .price {
          width: 182px;
          height: 32px;
          background-image: url(https://static.hudongmiao.com/joymewH5/img/popupArea/priceBox.png);
          background-size: 100% 100%;
          position: relative;
          left: 8px;
          font-size: 24px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 14px;
          letter-spacing: 1px;
          color: #8a4e41;
          .unit {
            width: 28px;
            height: 21px;
            margin-left: 6px;
          }
        }
        .color {
          width: 210px;
          height: 100px;
          background-blend-mode: normal, normal;
          border-radius: 8px;
          border: 5px solid rgba(255, 255, 255, 0.24);
          font-size: 28px;
          color: #ffffff;
          &.active {
            &.qx {
              background-image: linear-gradient(0deg, #4ffff9 0%, #7be5fc 50%, #a6caff 100%), linear-gradient(#59cfec, #59cfec);
              color: #1c8bbe;
            }
            &.mh {
              background-image: linear-gradient(0deg, #9d2aff 0%, #ce3cf4 50%, #ff4de8 100%), linear-gradient(#d115e2, #d115e2);
              color: #620095;
            }
            &.yl {
              background-image: linear-gradient(0deg, #ff3140 0%, #ff8787 100%), linear-gradient(#b50054, #b50054);
              color: #ac123e;
            }
          }
        }
      }
    }
    .txtWrap {
      margin-top: 40px;
      textarea {
        width: 670px;
        height: 210px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        font-size: 28px;
        padding: 25px 32px;
        color: #ffffff;
        box-sizing: border-box;
        outline: none;
        border: none;
        &::placeholder {
          font-size: 28px;
          color: #ffffff;
        }
      }
    }
    .btnWrap {
      width: 100%;
      height: 80px;
      margin-top: 75px;
      .btn {
        width: 500px;
        height: 80px;
        background-image: url(https://static.hudongmiao.com/joymewH5/img/popupArea/btnBg.png);
        border-radius: 6px;
        font-size: 34px;
        letter-spacing: 3px;
        color: #a24935;
      }
    }
  }
}
</style>
